<template>
  <div class="w-full">
    <a-checkbox-group @change="inputVal" v-model:value="value" :placeholder="props.placeholder" :options="props.options" />
  </div>
</template>
<script setup>
const emits = defineEmits(['update:value','change'])
const props = defineProps({
  value: Array,
  placeholder: {
    type: String,
    default: '请输入',
  },
  options: {
    type: Array,
    default: [],
  },
})

const state = reactive({
  value: undefined,
})
state.value = props.value

const inputVal = (val) => {
  emits('update:value', state.value)
  emits('change', state.value)
}
watch(
  () => props.value,
  (newVal, oldVal) => {
    if (newVal === undefined) {
      state.value = undefined
    } else {
      state.value = newVal
    }
  },
  { deep: true }
)
defineExpose({})
const { value } = toRefs(state)
</script>

